import React from 'react';
import ReactDOM from 'react-dom';
import Input from './input'
import List from './list'
class App extends React.Component {
  state = {
    todoList: [{ id: 11, value: "测试" }],
    todo: ''
  }
  changeTodo = (e) => {
    this.setState({
      todo: e.target.value
    })
  }
  submit = () => {
    // console.log("submit")
    // this.state.todoList.push({ id: Math.random(), value: this.state.todo })
    this.setState({
      todo: '',
      // todoList: this.state.todoList.push({ id: Math.random(), value: this.state.todo })
      todoList: [{ id: Math.random(), value: this.state.todo }].concat(this.state.todoList)
    })
  }
  del = (id) => {
    console.log(id)
    this.setState({
      todoList: this.state.todoList.filter(item => id != item.id)
    })
  }
  qqq(item) {
    return <b>{item.value}</b>
  }
  render() {
    let { todo, todoList } = this.state;
    return <div className=''>
      <h1>{todo}</h1>
      <Input value={todo} onChange={this.changeTodo} onEnter={this.submit} />
      <List list={todoList} onDel={this.del} render123={this.qqq} />
      <h1>-------------------------------------</h1>

      <List list={todoList} onDel={this.del} render123={(item) => <i>{item.value}</i>} />
    </div>;
  }
}

ReactDOM.render(<App />, document.getElementById('root'))